<template>
  <div class="flight-search">
    <!-- 固定部分 -->
    <div class="fixed-header">
      <!-- 顶部导航栏 -->
      <div class="nav-bar">
        <div class="back" @click="router.back()">
          <van-icon name="arrow-left" size="20"/>
        </div>
        <div class="route">
          北京 → 榆林
          <i class="iconfont icon-arrow-down"></i>
        </div>
        <div class="user" @click="handleUserClick">
          <van-icon name="user-o" size="20"/>
        </div>
      </div>

      <!-- 日期选择器部分 -->
      <div class="date-select">
        <div class="date-list">
          <div
              v-for="(item, index) in dates"
              :key="index"
              :class="{ active: index === 2 }"
              class="date-item"
              @click="selectDate(item)"
          >
            <div class="weekday">{{ item.weekday }}</div>
            <div class="day">{{ item.day }}</div>
            <div class="price">¥{{ item.price }}</div>
          </div>
        </div>
        <div class="calendar-btn" @click="openCalendar">
          <van-icon name="calendar-o"/>
          <span>日历</span>
        </div>
      </div>
    </div>

    <!-- 可滚动内容 -->
    <div class="scrollable-content">
      <!-- 内容区域 -->
      <div class="content-wrapper">
        <!-- 筛选条件和航班列表卡片 -->
        <div class="content-box">
          <!-- 筛选条件 -->
          <div class="filter-bar">
            <div class="filter-item">
              筛选 <i class="iconfont icon-filter"></i>
            </div>
            <div class="filter-item">
              机场 <i class="iconfont icon-arrow-down"></i>
            </div>
            <div class="filter-item">公务舱/头等舱</div>
            <div class="filter-item">
              低价优先 <i class="iconfont icon-arrow-down"></i>
            </div>
          </div>

          <!-- 航班列表 -->
          <div class="flight-list">
            <!-- 航班卡片 -->
            <div class="flight-card">
              <div class="airline-info">
                <img class="airline-logo" src="@/assets/img/airline-logo.png"/>
              </div>
              <div class="flight-info">
                <div class="time-info">
                  <div class="depart">
                    <div class="time">20:30</div>
                    <div class="airport">首都T2</div>
                  </div>
                  <div class="duration">
                    <div class="line"></div>
                    <div class="flight-no">海航HU7133</div>
                  </div>
                  <div class="arrive">
                    <div class="time">22:10</div>
                    <div class="airport">榆林T2</div>
                  </div>
                </div>
                <div class="price-info">
                  <div class="price">¥460</div>
                </div>
              </div>
              <div class="flight-extra">
                <span>波音737(中)</span>
                <span>无餐食</span>
                <span>准点率100%</span>
              </div>
            </div>

            <!-- 第二个航班 -->
            <div class="flight-card">
              <div class="airline-info">
                <img class="airline-logo" src="@/assets/img/airline-logo.png"/>
              </div>
              <div class="flight-info">
                <div class="time-info">
                  <div class="depart">
                    <div class="time">19:35</div>
                    <div class="airport">大兴</div>
                  </div>
                  <div class="duration">
                    <div class="line"></div>
                    <div class="flight-no">中联航KN5102</div>
                  </div>
                  <div class="arrive">
                    <div class="time">21:05</div>
                    <div class="airport">榆林T2</div>
                  </div>
                </div>
                <div class="price-info">
                  <div class="price">¥505</div>
                </div>
              </div>
              <div class="flight-extra">
                <span>波音737(中)</span>
                <span>无餐食</span>
                <span>准点率100%</span>
              </div>
            </div>

            <!-- 第三个航班 -->
            <div class="flight-card">
              <div class="airline-info">
                <img class="airline-logo" src="@/assets/img/airline-logo.png"/>
              </div>
              <div class="flight-info">
                <div class="time-info">
                  <div class="depart">
                    <div class="time">19:35</div>
                    <div class="airport">大兴</div>
                  </div>
                  <div class="duration">
                    <div class="line"></div>
                    <div class="flight-no">东航MU8081</div>
                  </div>
                  <div class="arrive">
                    <div class="time">21:05</div>
                    <div class="airport">榆林T2</div>
                  </div>
                </div>
                <div class="price-info">
                  <div class="price">¥510</div>
                </div>
              </div>
              <div class="flight-extra">
                <span>波音737(中)</span>
                <span>无餐食</span>
                <span>准点率100%</span>
              </div>
            </div>

            <!-- 第四个航班 -->
            <div class="flight-card">
              <div class="airline-info">
                <img class="airline-logo" src="@/assets/img/airline-logo.png"/>
              </div>
              <div class="flight-info">
                <div class="time-info">
                  <div class="depart">
                    <div class="time">12:50</div>
                    <div class="airport">大兴</div>
                  </div>
                  <div class="duration">
                    <div class="line"></div>
                    <div class="flight-no">中联航KN5605</div>
                  </div>
                  <div class="arrive">
                    <div class="time">14:25</div>
                    <div class="airport">榆林T2</div>
                  </div>
                </div>
                <div class="price-info">
                  <div class="price">¥675</div>
                </div>
              </div>
              <div class="flight-extra">
                <span>波音737(中)</span>
                <span>无餐食</span>
                <span>准点率100%</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 日期选择弹出层 -->
    <van-calendar
        v-model:show="showCalendar"
        :max-date="maxDate"
        :min-date="minDate"
        @confirm="onConfirmDate"
    />

    <!-- 底部服务保障 -->
    <div class="guarantee-wrapper">
      <service-guarantee use-card/>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {Icon as VanIcon} from "vant";
import ServiceGuarantee from "@/components/ServiceGuarantee.vue";
import {getToken} from "@/utils/auth";

const router = useRouter();
const route = useRoute();
const showCalendar = ref(false);

// 日期范围设置
const minDate = new Date();
const maxDate = new Date(new Date().setMonth(new Date().getMonth() + 3));

// 获取路由参数
const {from, to, date, cabin} = route.query;

// 日期选择确认
const onConfirmDate = (date) => {
  showCalendar.value = false;
  // 这里可以处理选择的日期
  console.log("选择的日期:", date);
};

const dates = ref([
  {day: "02-02", weekday: "周日", price: "310"},
  {day: "02-03", weekday: "周一", price: "395"},
  {day: "02-04", weekday: "周二", price: "460"},
  {day: "02-05", weekday: "周三", price: "310"},
  {day: "02-06", weekday: "周四", price: "395"},
]);

// 点击日期选择器时打开日历
const openCalendar = () => {
  showCalendar.value = true;
};

// 直接选择日期
const selectDate = (date) => {
  console.log("直接选择的日期:", date);
  // 这里处理日期选择逻辑
};

const handleUserClick = () => {
  if (getToken()) {
    router.push("/profile");
  } else {
    router.push("/login");
  }
};
</script>

<style lang="less" scoped>
.flight-search {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 50px;
}

.fixed-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #f5f5f5;
}

.nav-bar {
  background-color: #2681ff;
  color: white;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 44px;

  .back,
  .user {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }

  .route {
    font-size: 18px;
    font-weight: bold;
  }
}

.date-select {
  background: white;
  padding: 10px 0;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;

  .date-list {
    flex: 1;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;

    &::-webkit-scrollbar {
      display: none;
    }

    .date-item {
      flex: none;
      width: 20%;
      text-align: center;
      padding: 0 5px;
      cursor: pointer;

      &.active {
        .weekday,
        .day {
          color: #2681ff;
        }

        .price {
          color: white;
          background: #2681ff;
        }
      }

      .weekday {
        font-size: 12px;
        color: #666;
      }

      .day {
        font-size: 16px;
        margin: 3px 0;
      }

      .price {
        font-size: 12px;
        padding: 2px 0;
        border-radius: 10px;
      }
    }
  }

  .calendar-btn {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #666;
    font-size: 12px;
    border-left: 1px solid #eee;
    cursor: pointer;

    .van-icon {
      font-size: 20px;
      margin-bottom: 2px;
    }
  }
}

.scrollable-content {
  min-height: calc(100vh - 200px);
}

.content-wrapper {
  padding: 12px;

  .content-box {
    background: white;
    border-radius: 8px;
    overflow: hidden;

    .filter-bar {
      display: flex;
      padding: 12px 15px;
      border-bottom: 1px solid #eee;

      .filter-item {
        margin-right: 15px;
        font-size: 14px;
        color: #666;

        &:last-child {
          margin-right: 0;
        }
      }
    }

    .flight-list {
      .flight-card {
        padding: 15px;

        &:not(:last-child) {
          border-bottom: 1px solid #eee;
        }
      }
    }
  }
}

.flight-card {
  margin: 0;
  border-radius: 0;

  .airline-info {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .airline-logo {
      width: 24px;
      height: 24px;
      margin-right: 10px;
    }
  }

  .flight-info {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .time-info {
      display: flex;
      align-items: center;

      .depart,
      .arrive {
        text-align: center;

        .time {
          font-size: 20px;
          font-weight: bold;
        }

        .airport {
          font-size: 12px;
          color: #666;
        }
      }

      .duration {
        margin: 0 20px;

        .line {
          height: 1px;
          width: 100px;
          background: #ddd;
          position: relative;

          &::after {
            content: "";
            position: absolute;
            right: -4px;
            top: -4px;
            width: 8px;
            height: 8px;
            border-top: 1px solid #ddd;
            border-right: 1px solid #ddd;
            transform: rotate(45deg);
          }
        }

        .flight-no {
          font-size: 12px;
          color: #999;
          text-align: center;
          margin-top: 5px;
        }
      }
    }

    .price-info {
      text-align: right;

      .price {
        color: #ff6b6b;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .flight-extra {
    margin-top: 10px;
    font-size: 12px;
    color: #999;

    span {
      margin-right: 10px;

      &:not(:last-child)::after {
        content: "|";
        margin-left: 10px;
      }
    }
  }

  .guarantee-wrapper {
    margin: 16px;

    :deep(.service-guarantee) {
      margin: 0;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
  }
}
</style>
